<!-- 我的商品收藏 -->
<template>
  <view class="page-app">
    <view class="page-main">
      <view class="page-body">
        <view class="cart-box ss-flex ss-flex-col ss-row-between">
          <!-- 头部 -->
          <view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
            <view class="header-left ss-flex ss-col-center ss-font-26">
              共
              <text class="goods-number ui-TC-Main ss-flex">{{ state.pagination.total }}</text> 件商品
            </view>
            <view class="header-right">
              <tui-button
                v-if="state.editMode && state.pagination.total"
                type="gray"
                plain
                shape="circle"
                height="56rpx"
                width="120rpx"
                @click="state.editMode = false"
              >
                取消
              </tui-button>
              <tui-button
                v-if="!state.editMode && state.pagination.total"
                type="danger"
                plain
                shape="circle"
                height="56rpx"
                width="120rpx"
                @click="state.editMode = true"
              >
                编辑
              </tui-button>
            </view>
          </view>
          
          <!-- 内容 -->
          <view class="cart-content">
            <view
              class="goods-box ss-r-10 ss-m-b-14"
              v-for="item in state.pagination.list"
              :key="item.id"
            >
              <view class="ss-flex ss-col-center">
                <label
                  class="check-box ss-flex ss-col-center ss-p-l-10"
                  v-if="state.editMode"
                  @tap="onSelect(item.spuId)"
                >
                  <radio
                    :checked="state.selectedCollectList.includes(item.spuId)"
                    color="#ff6b35"
                    style="transform: scale(0.8)"
                    @tap.stop="onSelect(item.spuId)"
                  />
                </label>
                <view class="goods-item">
                  <view class="img-box ss-m-r-24">
                    <image class="order-img" :src="item.picUrl" mode="aspectFill"></image>
                  </view>
                  <view class="box-right ss-flex-col ss-row-between" style="width: 400rpx;">
                    <view class="title-text ss-line-2" v-if="item.spuName">{{ item.spuName }}</view>
                    <view class="ss-flex">
                      <view class="ss-flex ss-col-center">
                        <view
                          class="price-text ss-flex ss-col-center"
                          style="color: #FF3000"
                          v-if="item.price && Number(item.price) > 0"
                        >
                          ￥{{ fen2yuan(item.price) }}
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 底部 -->
          <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom" v-show="state.editMode">
            <view class="footer-left ss-flex ss-col-center">
              <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
                <radio
                  :checked="state.selectAll"
                  color="#ff6b35"
                  style="transform: scale(0.7)"
                  @tap.stop="onSelectAll"
                />
                <view> 全选 </view>
              </label>
            </view>
            <view class="footer-right">
              <tui-button
                type="danger"
                shape="circle"
                height="80rpx"
                width="200rpx"
                @click="onCancel"
              >
                取消收藏
              </tui-button>
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view
          v-if="state.pagination.total > 0"
          class="load-more"
          @tap="loadMore"
        >
          <text v-if="state.loadStatus === 'loading'">加载中...</text>
          <text v-else-if="state.loadStatus === 'noMore'">没有更多了</text>
          <text v-else>上拉加载更多</text>
        </view>
        
        <!-- 空状态 -->
        <view v-if="state.pagination.total === 0" class="empty-state">
          <image src="/static/collect-empty.png" class="empty-icon" mode="aspectFit"></image>
          <text class="empty-text">暂无收藏</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        state: {
          pagination: {
            list: [],
            total: 0,
            pageNo: 1,
            pageSize: 6,
          },
          loadStatus: '',
          editMode: false,
          selectedCollectList: [], // 选中的 SPU 数组
          selectAll: false,
        }
      }
    },
    onLoad() {
      console.log('商品收藏页面加载');
      this.getData();
    },
    onReachBottom() {
      this.loadMore();
    },
    methods: {
      // 分转元函数
      fen2yuan(price) {
        return (Number(price) / 100).toFixed(2);
      },
      
      
      // 获取收藏数据
      async getData() {
        this.state.loadStatus = 'loading';
        try {
          const result = await this.$api.req(`/product/favorite/page?pageNo=${this.state.pagination.pageNo}&pageSize=${this.state.pagination.pageSize}`, {}, 'GET', 'JSON', false);
          
          console.log('收藏列表API响应:', result);
          
          if (result.code === 0) {
            if (this.state.pagination.pageNo === 1) {
              this.state.pagination.list = result.data.list || [];
            } else {
              this.state.pagination.list = this.state.pagination.list.concat(result.data.list || []);
            }
            this.state.pagination.total = result.data.total || 0;
            this.state.loadStatus = this.state.pagination.list.length < this.state.pagination.total ? 'more' : 'noMore';
            
            console.log('收藏列表数据:', this.state.pagination.list);
            console.log('数据长度:', this.state.pagination.list.length);
          } else {
            this.state.loadStatus = 'noMore';
            console.error('API返回错误:', result);
            uni.showToast({
              title: result.msg || '获取收藏列表失败',
              icon: 'error'
            });
          }
        } catch (error) {
          console.error('获取收藏列表失败:', error);
          this.state.loadStatus = 'noMore';
          uni.showToast({
            title: '获取收藏列表失败',
            icon: 'error'
          });
        }
      },
      
      // 单选选中
      onSelect(spuId) {
        if (!this.state.selectedCollectList.includes(spuId)) {
          this.state.selectedCollectList.push(spuId);
        } else {
          this.state.selectedCollectList.splice(this.state.selectedCollectList.indexOf(spuId), 1);
        }
        this.state.selectAll = this.state.selectedCollectList.length === this.state.pagination.list.length && this.state.pagination.list.length > 0;
        console.log('单选选中:', spuId);
        console.log('选中的商品:', this.state.selectedCollectList);
        console.log('全选状态:', this.state.selectAll);
      },
      
      // 全选
      onSelectAll() {
        this.state.selectAll = !this.state.selectAll;
        if (!this.state.selectAll) {
          this.state.selectedCollectList = [];
        } else {
          this.state.selectedCollectList = this.state.pagination.list.map((item) => item.spuId);
        }
        console.log('全选状态:', this.state.selectAll);
        console.log('选中的商品:', this.state.selectedCollectList);
      },
      
      // 取消收藏
      async onCancel() {
        if (!this.state.selectedCollectList || this.state.selectedCollectList.length === 0) {
          uni.showToast({
            title: '请选择要取消收藏的商品',
            icon: 'none'
          });
          return;
        }
        
        uni.showModal({
          title: '提示',
          content: `确定要取消收藏这${this.state.selectedCollectList.length}件商品吗？`,
          success: async (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: '取消收藏中...'
              });
              
              try {
                // 逐个取消收藏
                for (const spuId of this.state.selectedCollectList) {
                  await this.$api.req('/product/favorite/delete', {
                    spuId: spuId
                  }, 'DELETE', 'JSON', false);
                }
                
                uni.showToast({
                  title: '取消收藏成功',
                  icon: 'success'
                });
                
                // 清空选择 + 重新加载
                this.state.editMode = false;
                this.state.selectedCollectList = [];
                this.state.selectAll = false;
                this.state.pagination.pageNo = 1;
                await this.getData();
              } catch (error) {
                console.error('取消收藏失败:', error);
                uni.showToast({
                  title: '取消收藏失败',
                  icon: 'error'
                });
              } finally {
                uni.hideLoading();
              }
            }
          }
        });
      },
      
      // 加载更多
      loadMore() {
        if (this.state.loadStatus === 'noMore' || this.state.loadStatus === 'loading') {
          return;
        }
        this.state.pagination.pageNo++;
        this.getData();
      },
      
    }
  }
</script>

<style lang="scss" scoped>
  .page-app {
    position: relative;
    color: #333;
    background-color: #f5f5f5;
    z-index: 2;
    display: flex;
    width: 100%;
    height: 100vh;

    .page-main {
      position: absolute;
      z-index: 1;
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;

      .page-body {
        width: 100%;
        position: relative;
        z-index: 1;
        flex: 1;
      }
    }
  }


  .cart-box {
    .cart-header {
      height: 70rpx;
      background-color: #f6f6f6;
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1000;
      box-sizing: border-box;
    }

    .cart-footer {
      height: 100rpx;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      border-top: 1rpx solid #f0f0f0;

    }

    .cart-content {
      width: 100%;
      margin-top: 70rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      padding-bottom: 100rpx;
      
      .goods-box {
        background-color: #fff;
        border-radius: 10rpx;
        margin-bottom: 14rpx;
        
        &:last-child {
          margin-bottom: 40rpx;
        }
      }
    }
  }

  .check-box {
    padding: 20rpx 10rpx;
  }

  .goods-item {
    flex: 1;
    display: flex;
    padding: 20rpx;
    align-items: center;
  }

  .img-box {
    width: 120rpx;
    height: 120rpx;
  }

  .order-img {
    width: 100%;
    height: 100%;
    border-radius: 8rpx;
  }

  .box-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120rpx;
  }

  .title-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .price-text {
    font-size: 32rpx;
    font-weight: 600;
  }

  .load-more {
    text-align: center;
    padding: 40rpx 0;
    color: #999;
    font-size: 28rpx;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120rpx 0;
  }

  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 40rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }

  /* 工具类 */
  .ss-flex {
    display: flex;
  }

  .ss-flex-col {
    flex-direction: column;
  }

  .ss-row-between {
    justify-content: space-between;
  }

  .ss-col-center {
    align-items: center;
  }

  .ss-p-x-30 {
    padding-left: 30rpx;
    padding-right: 30rpx;
  }

  .ss-font-26 {
    font-size: 26rpx;
  }

  .ss-font-28 {
    font-size: 28rpx;
  }

  .ss-r-10 {
    border-radius: 10rpx;
  }

  .ss-m-b-14 {
    margin-bottom: 14rpx;
  }

  .ss-p-l-10 {
    padding-left: 10rpx;
  }

  .ss-p-r-30 {
    padding-right: 30rpx;
  }

  .ss-m-r-24 {
    margin-right: 24rpx;
  }

  .ss-line-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ui-TC-Main {
    color: #ff6b35;
  }


  .border-bottom {
    border-bottom: 1rpx solid #f0f0f0;
  }
</style>